@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2*1px;
}
$blue:#241f47;
$yellow: #fade5d;
@mixin transf{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
html,body{
    position: relative;
    height: 100%;
}
header{
    height: p(88);
    display: flex;
    align-items: center;
    .menu{
        flex-grow: 1.3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        i{
            font-size: p(40);
            color: $blue;
        }
    }
    .search{
        flex-grow: 8.7;
        position: relative;
        display: flex;
        justify-content: center;
        input[type="search"]{
            width: p(420);
            height: p(41);
            border: 1px solid $blue;
            border-radius: p(20);
            text-align: center;
            padding: 0 p(24);
            position: relative;
            z-index: 1;
            background: transparent;
            &:focus ~ i{
                opacity: 0;
            }
        }
        i{
            font-size: p(24);
            color: #bababa;
            @include transf;
            transform: translate(-50%,-50%) scale(0.9);
        }
    }
}
.main{
    position: absolute;
    top: p(88);
    bottom: p(93);
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
//轮播图
.slideCon{
    height: p(313);
    .swiper-pagination-bullet{
        width: p(13);
        height: p(13);
        background: #fff;
        opacity: 1;
    }
    .swiper-pagination-bullet-active{
        background: #fade5d;
    }
    .slideShow{
        li{
            position: relative;
            img{
                width: 100%;
            }
            .tip{
                position: absolute;
                left: 0;
                bottom: p(20);
                width: 100%;
                height: p(40);
                background: rgba(0,0,0,0.5);
                line-height: p(40);
                p{
                    color: #fff;
                    font-size: p(16);
                    margin-left: p(70);
                }
            }
        }
    }
    
}
//产品详细页
.goodsList{
    background: url(../img/bg.jpg);
    padding-top: p(16);
    .goods{
        height: p(178);
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: p(17);
        background: #fff;
        .goodsImg{
            width: p(352);
            height: p(178);
            overflow: hidden;
            position: relative;
            img{
                width: 100%;
                @include transf;
            }
        }
        .goodsBtn{
            font-size: p(26);
            text-align: center;
            line-height: p(54);
            color: #fff;
            display: inline-block;
            width: p(184) ;
            height: p(54);
            background: url(../img/btnBg.png) no-repeat center;
            background-size: 100%;
        }
    }
}
//底部导航
footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: p(93);
    border-top: p(2) solid $blue;
    background: url(../img/footerBg.jpg);
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            width: p(100);
            height: p(70);
            text-align: center;
            .navImg{
                display: inline-block;
                width: p(46);
                height: p(48);
                overflow: hidden;
                position: relative;
                font-size: 0;
                img{
                    width: 100%;
                    @include transf;
                }
            }
            .title{
                font-size: p(24);
                a{
                    color: $blue;
                }
            }
            .active{
                a{color: $yellow;}
            }
        }
    }
    
}
